import React from "react"
import "twin.macro"

const Logos = () => (
  <div tw="flex space-x-10 mt-10 items-center">
    <a
      tw="w-20 block fill-current text-primary hover:text-secondary duration-100"
      href="https://github.com/ben-rogerson/twin.macro"
      target="_blank"
      rel="noopener noreferrer"
    >
      <svg viewBox="0 0 100 35" xmlns="http://www.w3.org/2000/svg">
        <path d="m31.839 11.667c0-6.2223-3.3515-10.111-10.054-11.667 3.3514 2.3333 4.6082 5.0556 3.7704 8.1667-0.4781 1.7751-1.8653 3.0438-3.4009 4.4481-2.5016 2.2877-5.3968 4.9354-5.3968 10.718 0 6.2223 3.3515 10.111 10.054 11.667-3.3515-2.3333-4.6083-5.0556-3.7704-8.1667 0.478-1.775 1.8653-3.0438 3.4009-4.4481 2.5015-2.2877 5.3967-4.9354 5.3967-10.718z" />
        <path d="m-2.7803e-7 11.667c1.4828e-7 -6.2223 3.3515-10.111 10.055-11.667-3.3515 2.3333-4.6083 5.0556-3.7705 8.1667 0.47806 1.7751 1.8653 3.0438 3.4009 4.4481 2.5016 2.2877 5.3968 4.9354 5.3968 10.718 0 6.2223-3.3515 10.111-10.054 11.667 3.3515-2.3333 4.6083-5.0556 3.7704-8.1667-0.47805-1.775-1.8653-3.0438-3.4009-4.4481-2.5015-2.2877-5.3967-4.9354-5.3967-10.718z" />
        <path d="m50.594 15.872h-3.9481v7.6c0 2.0267 1.3373 1.995 3.9481 1.8683v3.0717c-5.2853 0.6333-7.3867-0.8233-7.3867-4.94v-7.6h-2.9292v-3.2933h2.9292v-4.2534l3.4386-1.0133v5.2667h3.9481v3.2933zm21.324-3.2933h3.6297l-4.9988 15.833h-3.3749l-3.3113-10.672-3.3431 10.672h-3.375l-4.9987-15.833h3.6297l3.0884 10.925 3.3431-10.925h3.2794l3.3113 10.925 3.1202-10.925zm7.8961-2.375c-1.2099 0-2.1969-1.0134-2.1969-2.185 0-1.2033 0.987-2.185 2.1969-2.185s2.1969 0.98167 2.1969 2.185c0 1.1717-0.987 2.185-2.1969 2.185zm-1.7193 18.208v-15.833h3.4386v15.833h-3.4386zm15.792-16.245c3.566 0 6.1131 2.4067 6.1131 6.5233v9.7217h-3.4386v-9.3733c0-2.4067-1.401-3.6734-3.566-3.6734-2.2606 0-4.0436 1.33-4.0436 4.56v8.4867h-3.4386v-15.833h3.4386v2.0266c1.0507-1.6466 2.77-2.4383 4.9351-2.4383z" />
      </svg>
    </a>
    <a
      tw="w-8 block fill-current text-primary hover:text-secondary duration-100"
      href="https://www.gatsbyjs.com"
      target="_blank"
      rel="noopener noreferrer"
    >
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 0C5.323 0 0 5.322 0 11.999A11.937 11.937 0 0012 24c6.677 0 12-5.322 12-12S18.68 0 12 0zM2.609 12.104l9.288 9.288c-5.113 0-9.288-4.174-9.288-9.288zm11.48 9.079L2.818 9.913c.937-4.174 4.695-7.305 9.181-7.305a9.481 9.48 0 017.619 3.862l-1.356 1.147a7.661 7.66 0 00-6.366-3.339 7.56 7.559 0 00-7.2 5.113l9.809 9.81c2.401-.836 4.278-2.922 4.8-5.427h-4.07V12h6.158c0 4.487-3.131 8.244-7.305 9.183z" />
      </svg>
    </a>
  </div>
)

export default Logos
